import React, { useEffect, useRef, useState } from "react";
import "@grapecity/spread-sheets-resources-zh";
import { SpreadSheets, Worksheet } from "@grapecity/spread-sheets-react";
import GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";

GC.Spread.Common.CultureManager.culture("zh-cn");

const panelHeight = "calc(100vh - 120px)";
const btnStyle = { width: 80 };
const spreadNS = GC.Spread.Sheets;

async function sleep(milliSeconds) {
  return new Promise((r) => setTimeout(r, milliSeconds));
}

export default () => {
  const ss = useRef();
  const [count, setCount] = useState(0);
  useEffect(() => {
    async function load() {
      const spread = ss.current?.spread;
      const sheet = spread.sheets[0];
      sheet.suspendPaint();
      sheet.setValue(0, 0, "cell-binding");
      sheet.setValue(2, 1, "Name");
      sheet.setValue(3, 1, "Age");
      sheet.setValue(4, 1, "Sex");
      sheet.setValue(5, 1, "Address.postcode");
      const person = {
        name: "张三",
        age: 10,
        sex: "男",
        address: {
          postCode: "123456",
        },
      };
      let source = new spreadNS.Bindings.CellBindingSource(person);
      sheet.setBindingPath(2, 2, "name");
      sheet.setBindingPath(3, 2, "age");
      sheet.setBindingPath(4, 2, "sex");
      sheet.setBindingPath(5, 2, "address.postCode");
      sheet.setSelection(2, 2, 1, 1);
      sheet.resumePaint();
    }
    load();
  }, []);
  return (
    <div>
      <div style={{ height: panelHeight }}>
        <SpreadSheets ref={ss}>
          <Worksheet />
          <Worksheet />
        </SpreadSheets>
      </div>
      <div style={{ padding: "20px 10px" }}>
        <button
          style={{ backgroundColor: "blue", color: "white" }}
          onClick={async () => {
            const persons = [
              {
                name: "张三",
                age: 10,
                sex: "男",
                address: {
                  postCode: "123456",
                },
              },
              {
                name: "李四",
                age: 20,
                sex: "男",
                address: {
                  postCode: "123456",
                },
              },
              {
                name: "王五",
                age: 10,
                sex: "男",
                address: {
                  postCode: "123456",
                },
              },
            ];
            const spread = ss.current.spread;
            const sheet0 = spread.sheets[0];
            const sheet1 = spread.sheets[1];
            for (let i = 0; i < persons.length; i++) {
              const person = persons[i];
              sheet0.suspendPaint();
              sheet0.suspendEvent();
              let source = new spreadNS.Bindings.CellBindingSource(person);
              sheet0.setDataSource(source);
              sheet0.clearSelection();
              sheet0.addSelection(0, 0, 6, 3);
              sheet0.resumePaint();
              sheet0.resumeEvent();
              spread
                .commandManager()
                .execute({ cmd: "copy", sheetName: "Sheet1" });
              sheet1.suspendPaint();
              sheet1.suspendEvent();
              sheet1.clearSelection();
              sheet1.addSelection(i * 7, 0, 1, 1);
              sheet1.resumePaint();
              sheet1.resumeEvent();
              spread
                .commandManager()
                .execute({ cmd: "paste", sheetName: "Sheet2" });
              await sleep(100);
            }
            spread.removeSheet(0);
          }}
        >
          拷贝
        </button>
      </div>
    </div>
  );
};
